<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item><b>业主信息管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>

    <el-card style="font-size: 20px;font-family: 'Helvetica Nee',serif">
      <b>宠物管理</b>
      <p style="font-size: 15px">用于管理小区里的宠物信息，包括业主、家庭成员及租户饲养的宠物</p>
    </el-card>
    <el-card class="box-card">
      <div class="card-header">
        <el-row>
          <el-col :span="21">
            <Button type="success" icon="md-add">添加</Button>
          </el-col>
          <el-col :span="3">
            <Input search enter-button placeholder="请输入搜索的内容" @on-search="search()"/>
          </el-col>
        </el-row>
      </div>

      <el-table :border="true" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="communityCode" label="所属小区" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="petUrl" label="宠物照片" width="150">
          <template slot-scope="scope">
            <viewer :images="[scope.row.petUrl]" style="height: 80px">
              <img :src="scope.row.petUrl" height="100%" alt="">
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="peopleName" label="所属成员" width="100"></el-table-column>
        <el-table-column prop="petName" label="宠物名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="carColor" label="宠物颜色" width="80"></el-table-column>
        <el-table-column prop="desc" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="created" label="创建时间" width="120"></el-table-column>
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template>
            <ButtonGroup>
              <Button type="info" icon="md-create"></Button>
              <Button type="error" icon="md-trash"></Button>
            </ButtonGroup>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <Page :total="40" show-elevator show-sizer />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "vehicle",
  data() {
    return {
      currentPage: 1,
      searchText: "",
      option: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }],
      tableData: [{
        id: "1",
        communityCode: '重庆天地"满天星"软件园投资计划',
        petUrl: 'https://img.uhdpaper.com/wallpaper/krypto-and-ace-dc-league-of-super-pets-871@1@g-preview.jpg',
        peopleName: '2022-05-02',
        petName: '重庆市',
        carColor: '重庆市',
        desc: '10800.00',
        created: '2016-05-07',
      }],
      value: '',
      value1: '',
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    search() {

    },
    goBack() {
      console.log('go back');
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>
.card-header {
  margin-bottom: 20px;
}

.block {
  text-align: center;
  margin-top: 10px;
}

.el-select {
  margin-left: 15px;
  margin-right: 30px;
}

.el-date-picker {
  margin-left: 50px;
}
.sou{
  display: inline;
}

</style>
